<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_css常用值</title>
</head>
<body>
<style>
  h1 {
    color: red;
    /*rgb(red,green,blue)取值范围[0，255]*/
    color: rgb(255, 0, 0);
    color: rgb(0, 255, 0);
    color: rgb(0, 0, 255);
    color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    color: rgb(0, 255, 255);
    color: rgb(255, 0, 255);
    color: rgb(255, 255, 0);
    color: rgb(128, 128, 128);
    /*16进制颜色表示法*/
    color: #ff0000;
    color: #00ff00;
    color: #0000ff;
    color: #ffffff;
    color: #000000;
    color: #808080;
    /*16进制颜色表示法:简写版 只要每种颜色的两个数字一样，且每对都有重复数字才可以简写*/
    color: #f00;
    color: #0f0;
    color: #00f;
    color: #fff;
    color: #000;
  }
    /*rgb(red,green,blue,alpha) alpha取值范围[0，1]*/
    div{
      width: 100px;
      height: 100px;
      border: 3px solid #000;
    }
    .d1{
      background-color: rgba(0, 0, 225, 1);
    }
    .d2{
      background-color: rgba(0, 0, 225, 0.6);
    }
    .d3{
      background-color: rgba(0, 0, 255, 0.3);
    }
    .d4{
      background-color: rgba(0, 0, 255, 0.1);
    }
    .d5{
      background-color: rgba(0, 0, 255, 0);
    }
    #bgi{
        width: 500px;
        height: 300px;
        /*背景处理：渐变（角度，颜色1，颜色2）*/
        background-image: linear-gradient(130deg,red,blue);
    }
    #viewport{
        height: 100vh;/*100% viewport height 撑满全屏高*/
        width: 100vw;/*100% viewport width 撑满全屏宽*/
        background-color:yellow;
    }

</style>

</body>
<div id="viewport"></div>
<div id="bgi"></div>
<h1>测试颜色</h1>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</html>